<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>

        <link rel="stylesheet" href="music.css">
    </head>

    <body>
        <div class="major_outer">
            <img src="image/pic_title.jpg" alt="" title="点我啊" onclick="hide_show()" class="title_pic"/>

            <div class="major" id="player">
                <div class="search_text">\
                    <input type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" placeholder="你倒是输入啊，记得回车" />
                </div>
                <div class="major_view">

                    <div class="view_left">
                        <div class="view_left_top">
                            <div class="view_left_top" :class="{playing:isPlay}">
                                <div class="cover_outer" id="cover_outer">
                                    <img id="cover_set" :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate"/>
                                </div>

                                <div class="view_MV" >
                                    <video ref='video' :src="mvUrl" controls="controls"></video>
                                </div>
                            </div>
                        </div>

                        <div class="major_control">
                            <audio id="audio_control" ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
                        </div>

                        <div class="major_comment" ref='major_comment'>
                            <p class='comment_title'>热&nbsp;&nbsp;门&nbsp;&nbsp;留&nbsp;&nbsp;言&nbsp;&nbsp;:</p>
                            <div class='comment_list'>
              
                                <dl v-for="item in hotComments">
                                    <dt>
                                        <img :src="item.user.avatarUrl" alt="" id="user_head"/>
                                    </dt>
                                    <dd class="user_name">
                                        {{item.user.nickname}}  :
                                    </dd>
                                    <dd class="comment_detail">
                                        {{item.content}}
                                    </dd>
                                </dl>
                            </div>
                        </div>

                        <div class="wrapper">
                            <div class="wrapper_left">
                                <ul ref="ul" class="bow_hang">
                                    <li v-for="item in lyric_after" :key="item.uid" :data-index='i' ref="lyric" id="bow_line">
                                       {{item.time}}
                                    </li>
                                </ul>
                            </div>

                            <div class="wrapper_left">
                                <ul ref="ul" class="lyric_hang">
                                    <li v-for="item in lyric_after" :key="item.uid" :data-index='i' ref="lyric" id="lyric_line">
                                        {{item.lyric}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="view_right">
                        <div class='song_major' ref='song_wrapper'>
                            <ul class="song_list">
                                <li v-for="item in musicList" id="s_l">
                                    <img src="image\pic_music_go.jpg" title="歌曲走起" href="javascript:;" @click="playMusic(item.id)">
                                    <b>
                                        {{item.name}}
                                    </b>
                                    <span>
                                        <img src="image\pic_MV_go.jpg" title="MV走起" @click="playMv(item.mvid)" v-if="item.mvid!=0">
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

       <script type="text/javascript" src="music.js"></script>
       <script type="text/javascript" src="work.js"></script>
    </body>
</html>